<template>
  <div class="mobile clearfix">
    <MobileHeader/>
     <div class="article-list-mobile detail clearfix">
       <div class="main clearfix">
         <!-- <h3>{{ article.title }}</h3> -->
         <div class="tip">
           <!--<span>时间：<i>2020.07.17</i></span>-->
          <!-- <span class="viewnum_ajax">点击数：<i style="display: inline;">50</i> 次</span>-->
          <!-- <span>发布来源：本站原创</span>                                            </div>-->
       </div>
       <div class="content clearfix" v-html="html"
            v-if="html != null">
       </div>
     </div>
<!--       <div class="r-top rad5" @click="$router.go(-1)">-->
         <div class="r-top rad3" v-on:click="back">
          <i class="iconfont icon-fanhuidingbu"></i>
         <a>返回上级</a>
       </div>
     </div>
     <MobileFooter/>
  </div>
</template>

<script>

  import MobileHeader from './MobileHeader.vue'
  import MobileFooter from "./MobileFooter";
  import _http from "../httpService";

  export default {
    name: "MobileArticle",
    components: {
      MobileHeader,
      MobileFooter
    },
    data(){
      return {
        myBackToTopStyle: {
          right: "100px",
          bottom: "150px",
          width: "40px",
          height: "40px",
          "border-radius": "20px",
          "line-height": "40px",
          background: "#fff",
        },
        attachment: null,
        html: null,
        article: null,
        pdf_loading_progress: 0.0,
      };
    },
    created() {
      _http.get("/content/jcContent/queryById?id=" + this.$route.params.id)
              .then((resp) => {
                if (resp.data.success) {
                  this.article = resp.data.result;
                  console.log(resp.data.result);
                  this.html = resp.data.result.content;
                  this.attachment = resp.data.result.attachment;

                  console.log(this.html);
                } else this.html = "<h1>文章正在读取中...</h1>";
              })
              .catch((error) => console.log(error))
              .finally(() => (this.loading = false));
    },
    methods: {
      progress(number) {
        this.pdf_loading_progress = number;
      },
        back(){
            this.$router.go(-1);//返回上一层
        },
      backToTop() {
        let distanceY = window.pageYOffset;
        let i = 0;
        this.interval = setInterval(() => {
          let next = Math.floor(
                  this.easeInOutQuad(10 * i, distanceY, -distanceY, 500)
          );
          if (next <= this.backPosition) {
            window.scrollTo(0, this.backPosition);
            clearInterval(this.interval);
          } else {
            window.scrollTo(0, next);
          }
          i++;
        }, 17);
      },
    },

    watch: {
      //监听相同路由下参数变化的时候，从而实现异步刷新
      $route() {
        console.log(this.$route.params.id+"-------------");
        _http.get("/content/jcContent/queryById?id=" + this.$route.params.id)
                .then((resp) => {
                  if (resp.data.success) {
                    console.log()
                    this.article = resp.data.result;
                    console.log(resp.data.result);
                    this.html = resp.data.result.content;
                    this.attachment = resp.data.result.attachment;

                    console.log(this.html);
                  } else this.html = "<h1>文章正在读取中...</h1>";
                })
                .catch((error) => console.log(error))
                .finally(() => (this.loading = false));
      },
      immediate: true,
    },
  }
</script>

<style scoped>

</style>
